<template>
	<view class="page">
		<p class="timing">{{current_time | transformTime}}</p>
		<movable-area cancelable="false" class="progress-bar">
			<movable-view :x="currentPercentX" y="0" direction="horizontal" friction="41" inertia="true" class="progress-ball"
			 @click="useCamera" @touchmove='getInfo'></movable-view>
		</movable-area>
		<p class="timing">{{duration |transformTime }}</p>
	</view>
</template>

<script>
	import {
		transfromNumberToTime
	} from "../utils/helper.js"
	
	export default {
		data() {
			return {
				position: '',
				barinfo: {
					width: "",
					height: "",
				},
				ballinfo: {
					r: "", //球的直径
					initLeft: "初始左边的距离"
				},
			}
		},
		filters: {
			transformTime(val) {
				return transfromNumberToTime(val)
			}
		},
		props: {
			x: {
				type: Number,
				default: 100
			},
			current_time: {
				type: Number,
				default: 0
			},
			duration: {
				type: Number,
				default: 0
			},
		},
		computed: {
			currentPercentX() {
				return ((this.current_time / this.duration) * this.barinfo.width).toFixed(2)
			}
		},
		mounted() {
			this.barBallInfo()
		},
		methods: {
			barBallInfo() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.progress-bar').boundingClientRect(data => { //进度条bar
					this.barinfo.width = data.width.toFixed(2);
					this.barinfo.height = data.height.toFixed(2);
				}).exec()
				query.select('.progress-ball').boundingClientRect(data => { //进度条bar
					this.ballinfo.r = data.width.toFixed(2);
					this.ballinfo.initLeft = data.left

				}).exec()
			},
			getInfo() {
				// createSelectorQuery 创建一个选择节点的函数  in 是 将范围选在当前组件
				const query = uni.createSelectorQuery().in(this);
				query.select('.progress-ball').boundingClientRect(data => {
					const dragPercent = (((data.left - this.ballinfo.initLeft - data.width) + data.width) / this.barinfo.width).toFixed(
						2);
					const timing = this.duration * dragPercent;
					this.$emit("drageEvent", timing);
				}).exec()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 1rem 1rem;
		display: flex;
		align-items: center;

		.timing {
			color: #8e004e;
			margin: 0px 8px;
			width: 18vw;
			color: #FFECEC;
		}

		.progress-bar {
			width: 80vw;
			height: .4rem;
			background-color: lighten(gray, 30%);
			border-radius: 12px;
			position: relative;
			box-sizing: border-box;
			border: 1px solid cyan;

			.progress-ball {
				width: .8rem;
				height: .8rem;
				border-radius: 50%;
				background-color: #FFFDEF;
				position: absolute;
				top: -0.2rem;
				box-shadow: 0px 0px 15px #f0f2fe;
			}
		}
	}
</style>
